<template>
  <div class="navbar">
    <el-menu :default-active="activeIndex" class="navbar-menu" mode="horizontal" @select="handleSelect"
      background-color="#409EFF" text-color="#fff" active-text-color="#FFD04B">
      <!-- Logo区域 -->
      <div class="navbar-logo">
        <i class="el-icon-star-on"></i>
        <span>宠物管理系统</span>
      </div>

      <!-- 菜单项 -->
      <el-menu-item v-for="item in menuItems" :key="item.key" :index="item.key" @click="handleMenuClick(item)">
        {{ item.name }}
      </el-menu-item>

      <!-- 用户信息区域 -->
      <div class="navbar-user" v-if="isLoggedIn">
        <el-dropdown @command="handleUserCommand">
          <span class="el-dropdown-link">
            <i class="el-icon-user-solid"></i>
            {{ userDisplayName }}
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="profile">个人中心</el-dropdown-item>
            <el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      
      <!-- 未登录时显示登录按钮 -->
      <div class="navbar-auth" v-else>
        <el-button type="primary" @click="goToLogin" class="auth-button" size="small">登录</el-button>
      </div>
    </el-menu>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from 'vuex'

export default {
  name: 'Navbar',

  data() {
    return {
      activeIndex: 'home'
    }
  },

  computed: {
    ...mapState('user', ['user']),
    ...mapGetters(['isLoggedIn', 'navMenuItems', 'userDisplayName']),
    
    menuItems() {
      // 不需要过滤，因为已经从getters中移除了登录注册项
      return this.navMenuItems
    }
  },

  mounted() {
    // 设置当前激活的菜单项
    this.setActiveIndex()
  },

  watch: {
    '$route'() {
      this.setActiveIndex()
    },
    // 监听登录状态变化
    isLoggedIn(newVal) {
      console.log('登录状态变化:', newVal)
      this.$forceUpdate() // 强制更新组件
    },
    // 监听菜单项变化
    navMenuItems(newVal) {
      console.log('菜单项变化:', newVal)
    }
  },

  methods: {
    ...mapActions('user', ['logout']),

    // 设置激活的菜单项
    setActiveIndex() {
      const currentPath = this.$route.path
      const currentItem = this.navMenuItems.find(item => item.path === currentPath)
      if (currentItem) {
        this.activeIndex = currentItem.key
      }
    },

    // 处理菜单选择
    handleSelect(key) {
      this.activeIndex = key
    },

    // 处理菜单点击
    handleMenuClick(item) {
      this.$router.push(item.path)
    },
    
    // 跳转到登录页面
    goToLogin() {
      this.$router.push('/login')
    },
    
    // 跳转到注册页面
    goToRegister() {
      this.$router.push('/register')
    },

    // 处理用户下拉菜单命令
    handleUserCommand(command) {
      if (command === 'logout') {
        this.handleLogout()
      } else if (command === 'profile') {
        this.$router.push('/profile')
      }
    },

    // 处理登出
    handleLogout() {
      this.$confirm('确定要退出登录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.logout()
        this.$router.push('/')
        this.$message.success('已成功退出登录')
      }).catch(() => {
        // 用户取消登出
      })
    }
  }
}
</script>

<style scoped>
.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.navbar-menu {
  display: flex;
  align-items: center;
  padding: 0 20px;
}

.navbar-logo {
  display: flex;
  align-items: center;
  margin-right: 30px;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
}

.navbar-logo i {
  margin-right: 8px;
  font-size: 20px;
}

.navbar-user {
  margin-left: auto;
  color: #fff;
}

.navbar-auth {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.auth-button {
  color: #fff !important;
  border-color: #fff !important;
}

.auth-button:hover {
  color: #FFD04B !important;
  border-color: #FFD04B !important;
}

.el-dropdown-link {
  cursor: pointer;
  color: #fff;
  display: flex;
  align-items: center;
}

.el-dropdown-link:hover {
  color: #FFD04B;
}

/* 覆盖Element UI的默认样式 */
.navbar-menu.el-menu--horizontal {
  border-bottom: none;
}

.navbar-menu .el-menu-item {
  border-bottom: none;
}

.navbar-menu .el-menu-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.navbar-menu .el-menu-item.is-active {
  border-bottom: 2px solid #FFD04B;
}
</style>